<template>
  <li>
    <div class="leftIndex" :class="{ firstThree:(index <= 3) }">{{ index.length === 1 ? 0 + index : index }}</div>
    <div class="information">
      <h4>{{ hotsong.name }} <span v-if="show" class="grayAlia">{{"(" + hotsong.alia[0] + ")"}}</span> </h4>
      <p class="grayAlia">
        <span class="sq"></span>
        <span class="ar-name" v-for="ar in hotsong.ar" :key="ar.id">{{
          ar.name
        }}</span>
        <span>{{ hotsong.al.name }}</span>
      </p>
    </div>
    <div class="bgPlay"></div>
  </li>
</template>


<script>
export default {
  props: {
    hotsong: Object,
    index: String,
  },
  created(){
    if( this.hotsong.alia.length ){
      this.show = true;
    }else{
      this.show = false;
    }
  }
};
</script>

<style lang="less" scoped>
li {
  text-align: left;
  display: flex;
  justify-content: space-between;
  padding: 5px;
  padding-left:40px;
  border-bottom:1px solid #ebebeb;
  position: relative;
  
  div:first-of-type {
    padding: 0px  15px 0px 10spx;
    align-self: center;
  }

  .bgPlay{
      background: url('../assets/music.png') no-repeat -48px 0;
      width: 44px;
      height: 44px;
      display:flex;
      align-self: center;
      transform:scale(0.6);
  }

  .leftIndex{
    position:absolute;
    top: 20px;
    left: 10px;
    color:#c7bbb5;

    
  }
}
div.firstThree{
  color:#e13470;
}
.information {
  display: flex;
  flex-direction: column;
  flex: 1;

  h4{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .grayAlia{
    color:#888897;
  }

  .ar-name {
    &::after {
      content: " / ";
    }
    &:last-of-type {
      &::after {
        content: " - ";
      }
    }
  }

  p{
    display:flex;
    font-size: 12px;
  }
}
.sq{
  background: url('../assets/music.png') no-repeat 0 0;
  width: 24px;
  height: 16px;
  display: block;
  margin-right:5px;
  transform:scale(0.6);
}

</style>